<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<ul class="list">
			<li data-index="0" age="18"> </li>
			<li data-index="1"> </li>
			<li data-index="2"> </li>
		</ul>
		
		<input type="button" id="btn" value="按钮"   />

	</body>
	<script type="text/javascript">
	    //cookie 大小4k左右      localStorage 大小5M左右
	
	
		//一、自定义属性=====================================
		var li01 = document.querySelector(".list>li");
		//获取数据
		var data_index = li01.dataset.index;
		//修改
		// li01.dataset.index="dwqdqwdqwd";
		//getAttribute 获得属性
		var age = li01.getAttribute("age");
		alert(age);
		//设置属性
		li01.setAttribute("age", 19);
		//getAttribute 万能的，可以取所有的属性。但是必须写全称。
		//data-*只是 getAttribute的一种特例
		alert(li01.getAttribute("data-index"));
		//二、持久化存储数据=====================================
		//类似Map
		//取数据
		var name = localStorage.getItem("name");
		alert(name);
		//存储 —— 特点关闭浏览器再打开还是有。
		localStorage.setItem("name", "kingswim");
		//删除
		localStorage.removeItem("max");
		//用法一样。特性-关掉浏览器数据会清空
		//sessionStorage.setItem();
		/*
		//其实所有的属性 都挂在 window
		var  a=789;
		alert(window.a);
		alert(window["a"]);
		*/
		//最重要 ：不要故意在key-value里面写空格。
		//设置
		//cookie 过期时间默认是关闭浏览器就过期
		
		var btn = document.querySelector("#btn");
		btn.addEventListener("click", function() {
			//希望某个cookie 有时间限制那就加 expires
			var date = new  Date();//当前时间对象 
			    date.setMonth(date.getMonth()+1);   //一个月之后过期
			    //document.cookie = "age=18 ;" + "expires=" + date.toGMTString();
			    //如果要取消时间限制，时间改为-1就可以了。因为时间不可能是负数
			    document.cookie = "age=18 ;" + "expires=" + (-1);
		});
		
		
		document.cookie = "name=kingswim";
		//修改
//		document.cookie = "age=28";
		console.log(document.cookie);
		console.log(getValue("name"));

		
		function getValue(key) {
			
			var keyValues = document.cookie.split(";"); //["age=18","name=kingswim"]
			for (var i = 0; i < keyValues.length; i++) {
				//[age,18]            //"age=18"
				var keyValue = keyValues[i].split("=");
				//因为前面会自带空格所以去掉。
				var keySp = keyValue[0].replace(" ","");
				var valueSp = keyValue[1].replace(" ","");
				if (keySp == key) {
					return valueSp;
				}
			}
			return null;
		}
          
        /*
        document.cookie = "age=18";
		document.cookie = "nname=kingnameswim";
		console.log(document.cookie);
        console.log(getData("name"));
        */             
		 //在以上情况会出现bug.本来没有name。但是还是可以取出数据

		/*function getData(key) {
			//age=18; name=kingswim
			var str = document.cookie.split(";");
			//	["age=18","name=kingswim"]
			for (var i = 0; i < str.length; i++) {
				//i=0   
				if (str[i].indexOf(key) >= 0) {
					//"age=18"
					var value = str[i].substr(str[i].indexOf("=") + 1); //=18
					return value;
				}
			}
			return null;
		}*/
	</script>

</html>